import React, { ReactNode } from 'react';
import { View, SafeAreaView, StyleSheet, StatusBar, Platform, KeyboardAvoidingView } from 'react-native';

interface ContainerProps {
  children: ReactNode;
  centerContent?: boolean;
  style?: any;
}

/**
 * 通用容器组件
 * 提供安全区域和适当的内边距，处理键盘弹出等常见问题
 */
export function Container({ children, centerContent = false, style }: ContainerProps) {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.keyboardAvoid}
    >
      <SafeAreaView style={styles.safeArea}>
        <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
        <View 
          style={[
            styles.container, 
            centerContent && styles.centerContent,
            style
          ]}
        >
          {children}
        </View>
      </SafeAreaView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  keyboardAvoid: {
    flex: 1,
  },
  safeArea: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  container: {
    flex: 1,
    backgroundColor: '#F9FAFB',
  },
  centerContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});
